<template>
	<view class="upload-img">
		<view :class="['type', swiper ? 'type-show' : 'type-hide']" @click="hideImg"></view>
		<view v-if="role!==0">
			<view v-show="swiper" style="color: #fff;position: fixed;right: 24rpx;top: 70rpx;z-index: 1001;" @click="del(img)">
				<text style="margin-right: 10rpx;">删除</text>
				<i-icon icon="iconshanchu" size="30rpx"></i-icon>
			</view>
			<view v-show="swiper" style="color: #fff;position: fixed;right: 180rpx;top: 70rpx;z-index: 1001;" @click="replace(img)">
				<i-icon icon="icontihuan" size="30rpx"></i-icon>
				<text style="margin-left: 10rpx;">替换</text>
			</view>
		</view>
		
		<view v-show="swiper" class="swiperImg">
			<swiper :current="currentIndex" :circular="true" :interval="3000" :duration="100" @change="swierChange" style="height: 800rpx;">
				<swiper-item v-for="(item,i) in list" :key="i">
					<movable-area scale-area class="movable-area">
						<movable-view scale-min="1" scale-max="4" scale="true" :scale-value="scale" class="movable-view">
							<image :src="item.img" mode="aspectFit" style="width: 100%;height: 100%;" @click="hideImg" @longtap='longtap(item)'></image>
						</movable-view>
					</movable-area>
				</swiper-item>
			</swiper>
		</view>
		<view class="upload-wrap">
			<!-- 标题 -->
			<view class="title">
				{{ title }}（{{ list.length }}/{{ maxLength }}） 
			</view>
			<!-- 图片列表 -->
			<!-- <scroll-view scroll-x> -->
				<view class="img-list flex flex-wrap-w" style="line-height: 100rpx;" v-if="role!==0">
					<view class="item" v-for="(item,index) in list" :key='index' :style="{'margin-right':margin+'rpx'}" @click="bigImg(index)">
						<image :src="item.img" mode="aspectFill" :style="{width:width+'rpx',height:height+'rpx'}"></image>
					</view>

					<view class="btn-upload item" @click="upload()" :style="{'margin-right':margin+'rpx'}" v-if="list.length < maxLength">
						<image :src="btnImg" :style="{width:width+'rpx',height:height+'rpx'}"></image>
					</view>
				</view>
				
				<view class="img-list flex flex-wrap-w" style="line-height: 100rpx;" v-else>
					<view class="item" v-for="(item,index) in list" :key='index' :style="{'margin-right':margin+'rpx'}" @click="bigImg(index)">
						<image :src="item.img" mode="aspectFill" :style="{width:width+'rpx',height:height+'rpx'}"></image>
					</view>
				</view>
			<!-- </scroll-view> -->
		</view>
		<u-popup v-model="show" mode="bottom">
			<view style="line-height: 100rpx;background-color: #fff;text-align: center;">
				<view style="border-bottom: 2rpx solid #EEEEEE;" @click='longpress'>保存图片</view>
				<view @click="show = false">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: 'uploadImg',

		model: {
			prop: 'list',
			event: 'listChange'
		},

		props: {
			margin:{
				type:Number,
				default:20
			},
			title: {
				type: String,
				default: '小标题'
			},

			list: {
				type: Array,
				default: () => []
			},

			maxLength: {
				type: Number,
				default: 1
			},
			width: {
				type: [Number, String],
				default: 100
			},
			height: {
				type: [Number, String],
				default: 100
			},
			role:{
				type:Number
			}
		},
		data() {
			return {
				show:false,
				isGet: true, //是否首次调用
				pms: [],
				scale: 1,
				logoUrl: '',
				arr: {},
				img: [],
				currentIndex: 0,//当前图
				swiper: false,
				imgList: [],
				btnImg: '',
				longtapList:{},//长按保存
				// navBack:true,
			}
		},
		created() {
			this.isGet = true
		},
		methods: {
			longtap(list){
				this.longtapList = list.img
				this.show = true
			},
			//预览图片
			getImg(index) {
				// this.currentIndex = index
				this.imgList = []
				for (let i in this.list) {
					this.imgList.push(this.list[i].img)
				}
				uni.previewImage({
					urls: this.imgList,
					current:index,
					indicator: 'number',
					longPressActions: {
						itemList: ['保存图片','替换','删除'],
						success:(data) => {
							this.currentIndex = data.tapIndex
							switch(data.tapIndex){
								case 0:
								this.longpress(this.list[data.index].img)
								break
								case 1:
								this.replace()
								break
								case 2:
								this.del()
								break
								default:
								break
							}
						},
						fail:(err) => {
							console.log(err.errMsg)
						}
					}
				})
			},
			longpress() {
				uni.saveImageToPhotosAlbum({
					filePath: this.longtapList,
					success: res => {
						uni.showToast({
							title: '保存至相册',
							icon: 'none'
						})
						this.show = false
					},
					fail: () => {
						uni.showToast({
							title: '保存失败，请稍后重试',
							icon: 'none'
						})
						this.show = false
					}
				})
				// this.$emit('longpress')
			},
			del(e) {
				this.$emit('del')

				this.list.splice(this.currentIndex, 1)
				// this.pms.splice(this.currentIndex, 1)
				this.swiper = false
				
			},
			replace(e) {
				this.$emit('replace')
				let id = e
				uni.chooseImage({
					sizeType: ['compressed'],
					count: 1,
					success: e => {
						uni.showLoading({
							title: '替换中'
						})
						this.$api.files
							.uploadImg({
								filePath: e.tempFilePaths[0],
							})
							.then(res => {
								uni.hideLoading()
								this.logoUrl = res.baseUrl + res.url

								this.list.splice(this.currentIndex, 1, {
									img: this.logoUrl
								})
								// this.pms.splice(this.currentIndex, 1, this.$api.files.uploadImg({
								// 	filePath: this.logoUrl,
								// }))
								this.swiper = false
							})
							.catch(err => {
								uni.hideLoading()
							})
					},
				})

				
			},
			//轮播定位
			swierChange(e) {
				// console.log(e.detail.current)
				this.currentIndex = e.detail.current
				this.$emit('swiper', e.detail.current)

			},
			bigImg(data) {
				this.$emit('click')
				this.currentIndex = data
				this.img = data
				this.swiper = true
				// this.swiper = false
			},
			//关闭事件
			hideImg() {
				this.swiper = false
				this.$emit('out')
			},
			// 上传图片
			upload() {
				let imgCount = this.maxLength > 9 ? 9 : this.maxLength
				uni.chooseImage({
					sizeType: ['compressed'],
					count: imgCount-this.list.length,
					success: e => {
						uni.showLoading({
							title: '上传中'
						})
						/* if (this.isGet) {
							uni.hideLoading()
						} */
						// this.isGet = false
						this.pms = [] // 记录请求数组
						// 添加图片上传请求
						e.tempFilePaths.map(img => {
							this.pms.push(this.$api.files.uploadImg({
								filePath: img,
							}))
							
						})
						
						// 处理所有请求
						Promise.all(this.pms).then(res => {
							// uni.hideLoading()
							this.arr = res.map(item => ({
								img: item.baseUrl + item.url
							}))
							
							this.arr.unshift(...this.list)
							this.$emit('listChange', this.arr)
							uni.hideLoading()
						}).catch(err => {
							this.isGet = false
							uni.hideLoading()
						})
					},
					fail: err => {
						uni.hideLoading()
						this.isGet = false
					}
				})

			},
		}
	}
</script>

<style lang="scss">
	.movable-view {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
		text-align: center;
	}

	.movable-area {
		height: 100%;
		width: 100%;
		position: fixed;
		overflow: hidden;
	}

	.movable-view image {
		width: 100%;
	}

	.lookimg {
		display: block;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}

	.imagecontent {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 1);
		top: 0;
		position: fixed;
	}

	/deep/.u-swiper-wrap {
		// height: 500rpx;
		// background-color: red;
	}

	.swiperImg {
		width: 100%;
		// height: 500rpx;
		position: fixed;
		top: calc(50% - 400rpx);
		right: 0;
		z-index: 1000;
	}

	// 遮罩层
	.type {
		position: fixed;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: rgba($color: rgb(53, 50, 53), $alpha: 1);
		z-index: 999;
		transition: all .4s;

		&.type-hide {
			visibility: hidden;
			opacity: 0;
		}

		&.type-show {
			visibility: visible;
			opacity: 1;
		}
	}

	image {
		border-radius: 16rpx;
	}

	.upload-img {
		margin: 0 28rpx;

		.upload-wrap {
			// margin: 50rpx 0;
		}
	}

	.title {
		margin: 10rpx 0;
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
	}
</style>
